<template>
    <div v-if="show" class="fire-effect-container">
        <!-- 火焰主体结构 - 使用GIF图片 -->
        <div class="flame-container">
            <!-- GIF火焰图片 -->
            <div class="gif-flame">
                <img :src="gifPath" alt="火焰特效" class="fire-gif"/>
            </div>

            <!-- 粒子火焰 - 作为GIF的补充 -->
            <div ref="flameRef" class="flame"></div>

            <!-- 烟雾效果 -->
            <div class="smoke-container">
                <div v-for="n in 8" :key="`smoke-${n}`" class="smoke" :style="{ animationDelay: `${n * 0.2}s` }"></div>
            </div>
        </div>

        <!-- 屏幕周围的火星效果 -->
        <div class="screen-sparks-container">
            <div class="screen-spark" v-for="n in 30" :key="n"></div>
        </div>

        <!-- 背景光晕 -->
        <div class="background-glow"></div>
    </div>
</template>

<script setup>
import {ref, watch, nextTick, onMounted, onUnmounted, computed} from 'vue';

// 定义props，与MagicEffect组件保持一致的接口
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    duration: {
        type: Number,
        default: 8000 // 特效持续时间，默认8秒
    },
    intensity: {
        type: Number,
        default: 1.0 // 火焰强度，范围0.5-2.0
    }
});

// 计算GIF路径
const gifPath = computed(() => {
    return '/imgs/fire.gif';
});

// 内部控制显示状态
const internalShow = ref(props.show);
const flameRef = ref(null);
let particleInterval = null;
const COUNT_OF_PARTICLES = 100; // 火焰粒子总数（减少一些，因为有GIF了）
const MAX_PARTICLES_ON_SCREEN = 60; // 同时显示的最大粒子数

// 监听外部show属性变化
watch(() => props.show, (newValue) => {
    if (newValue) {
        internalShow.value = true;
        // 等待DOM渲染后，初始化火焰
        nextTick(() => {
            initFlame();
            initRandomSparks();
        });

        // 定时隐藏特效
        setTimeout(() => {
            internalShow.value = false;
        }, props.duration);
    } else {
        internalShow.value = false;
        // 清理粒子
        clearParticles();
    }
});

// 暴露触发特效的方法
const emit = defineEmits(['effectEnd']);

// 监听内部显示状态变化，通知父组件特效结束
watch(internalShow, (newValue, oldValue) => {
    if (oldValue === true && newValue === false) {
        clearParticles();
        emit('effectEnd');
    }
});

// 初始化火焰效果
const initFlame = () => {
    if (!flameRef.value) return;

    const flameContainer = flameRef.value;

    // 设置CSS变量
    flameContainer.style.setProperty('--particles', COUNT_OF_PARTICLES);
    flameContainer.style.setProperty('--intensity', props.intensity);

    // 清除已有粒子
    clearParticles();

    // 创建初始粒子
    createInitialParticles();

    // 设置粒子持续生成的间隔
    particleInterval = setInterval(() => {
        if (internalShow.value && flameContainer.children.length < MAX_PARTICLES_ON_SCREEN) {
            createParticle();
        }
    }, 50);
};

// 创建初始粒子
const createInitialParticles = () => {
    if (!flameRef.value) return;

    const flameContainer = flameRef.value;

    // 初始创建20个粒子，立即开始动画
    for (let i = 0; i < 20; i++) {
        createParticle();
    }
};

// 创建单个火焰粒子
const createParticle = () => {
    if (!flameRef.value) return;

    const flameContainer = flameRef.value;
    const span = document.createElement('span');

    // 设置随机CSS变量
    const rnd = Math.random();
    const size = 20 + Math.random() * 40 * props.intensity;
    const position = Math.random() * 100;

    span.style.setProperty('--rnd', rnd);
    span.style.setProperty('--size', size + 'px');
    span.style.setProperty('--position', position + '%');
    span.style.setProperty('--delay', Math.random() * 0.5 + 's');

    // 随机选择火焰颜色
    const colorType = Math.floor(Math.random() * 3);
    let colorClass = '';

    switch (colorType) {
        case 0:
            colorClass = 'fire-color-orange';
            break;
        case 1:
            colorClass = 'fire-color-yellow';
            break;
        case 2:
            colorClass = 'fire-color-red';
            break;
    }

    span.classList.add(colorClass);

    // 添加到容器
    flameContainer.appendChild(span);

    // 设置动画结束后移除粒子
    const animationDuration = 1.5 + Math.random() * 1.5;
    span.style.animationDuration = animationDuration + 's';

    setTimeout(() => {
        if (span.parentNode === flameContainer) {
            flameContainer.removeChild(span);
        }
    }, animationDuration * 1000);
};

// 初始化随机火星位置
const initRandomSparks = () => {
    const sparks = document.querySelectorAll('.screen-spark');
    sparks.forEach(spark => {
        // 随机位置 - 屏幕四周
        const positionType = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left
        let pos = Math.random() * 100;

        // 设置随机方向
        const directionX = (Math.random() - 0.5) * 200;
        const directionY = (Math.random() - 0.5) * 200;
        spark.style.setProperty('--direction-x', directionX + 'px');
        spark.style.setProperty('--direction-y', directionY + 'px');

        switch (positionType) {
            case 0: // top
                spark.style.top = '0%';
                spark.style.left = pos + '%';
                break;
            case 1: // right
                spark.style.top = pos + '%';
                spark.style.right = '0%';
                break;
            case 2: // bottom
                spark.style.bottom = '0%';
                spark.style.right = pos + '%';
                break;
            case 3: // left
                spark.style.bottom = pos + '%';
                spark.style.left = '0%';
                break;
        }

        // 随机大小和延迟
        const size = 2 + Math.random() * 4;
        spark.style.width = size + 'px';
        spark.style.height = size + 'px';
        spark.style.animationDelay = Math.random() * 3 + 's';
        spark.style.animationDuration = 1 + Math.random() * 2 + 's';
    });
};

// 清除所有粒子
const clearParticles = () => {
    if (particleInterval) {
        clearInterval(particleInterval);
        particleInterval = null;
    }

    if (flameRef.value) {
        while (flameRef.value.firstChild) {
            flameRef.value.removeChild(flameRef.value.firstChild);
        }
    }
};

// 组件卸载时清理
onUnmounted(() => {
    clearParticles();
});
</script>

<style scoped>
/* 火焰特效容器 */
.fire-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

/* 火焰主体容器 */
.flame-container {
    position: relative;
    width: 200px;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* GIF火焰图片容器 */
.gif-flame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* 火焰GIF图片样式 */
.fire-gif {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
    animation: gifFlicker 5s ease-in-out infinite;
}

/* 粒子火焰 */
.flame {
    width: 12em;
    height: 16em;
    font-size: 16px;
    position: absolute;
    transform-origin: center bottom;
    z-index: 1;
}

/* 烟雾效果 */
.smoke-container {
    position: absolute;
    width: 150px;
    height: 150px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}

.smoke {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.1);
    animation: smokeRise 4s ease-in-out infinite;
}

/* 火焰粒子基础样式 */
.flame span {
    position: absolute;
    width: var(--size, 50px);
    height: var(--size, 50px);
    border-radius: 50%;
    bottom: 0;
    left: calc(var(--position) - (var(--size) / 2));
    mix-blend-mode: screen;
    animation: flameRise calc(1.5s + var(--rnd) * 1.5s) ease-in infinite;
    animation-delay: var(--delay, 0s);
    filter: opacity(0);
    will-change: transform, opacity;
}

/* 火焰粒子不同颜色 */
.fire-color-orange {
    background: radial-gradient(
            orangered 20%,
            rgba(255, 69, 0, 0) 70%
    );
    box-shadow: 0 0 20px 5px rgba(255, 69, 0, 0.4);
}

.fire-color-yellow {
    background: radial-gradient(
            rgba(255, 215, 0, 0.9) 20%,
            rgba(255, 215, 0, 0) 70%
    );
    box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
}

.fire-color-red {
    background: radial-gradient(
            rgba(178, 34, 34, 0.9) 20%,
            rgba(178, 34, 34, 0) 70%
    );
    box-shadow: 0 0 20px 5px rgba(178, 34, 34, 0.4);
}

/* 屏幕周围的火星容器 */
.screen-sparks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 屏幕周围的火星 */
.screen-spark {
    position: absolute;
    background: radial-gradient(
            circle,
            #ff6347 0%,
            rgba(255, 99, 71, 0.7) 60%,
            transparent 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 99, 71, 0.8);
    opacity: 0;
    animation: sparkFromScreenEdge 2s ease-out infinite;
    will-change: transform, opacity;
}

/* 背景光晕 */
.background-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
            circle,
            rgba(255, 69, 0, 0.2) 0%,
            rgba(255, 140, 0, 0.05) 50%,
            transparent 70%
    );
    border-radius: 50%;
    animation: backgroundGlowPulse 3s ease-in-out infinite;
}

/* 动画定义 */
@keyframes gifFlicker {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(1.02);
        opacity: 0.95;
    }
    75% {
        transform: scale(0.98);
        opacity: 0.98;
    }
}

@keyframes smokeRise {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.1;
        background: rgba(255, 255, 255, 0.15);
    }
    50% {
        opacity: 0.2;
    }
    100% {
        transform: translateX(calc(-50% + var(--smoke-offset, 10px))) translateY(-150px) scale(2.5);
        opacity: 0;
        background: rgba(255, 255, 255, 0.05);
    }
}

@keyframes flameRise {
    from {
        transform: translateY(0) scale(1);
        filter: opacity(0);
    }
    25% {
        filter: opacity(1);
    }
    70% {
        filter: opacity(0.7);
    }
    to {
        transform: translateY(calc(-16em * var(--intensity))) scale(0.3);
        filter: opacity(0);
    }
}

@keyframes sparkFromScreenEdge {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    20% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(var(--direction-x, 0px), var(--direction-y, 0px));
    }
}

@keyframes backgroundGlowPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}
</style>